data() {
  return {
    images: [
      { src: 'dist/upload/carousel/01.png', alt: 'Image 1' },
      { src: 'dist/upload/carousel/02.png', alt: 'Image 2' },
      { src: 'dist/upload/carousel/03.png', alt: 'Image 3' },
      { src: 'dist/upload/carousel/04.png', alt: 'Image 3' },
      { src: 'dist/upload/carousel/05.png', alt: 'Image 3' },
    ],
    currentIndex: 0,
    timer: null
  };
},
methods: {
  nextImage() {
    this.currentIndex = (this.currentIndex + 1) % this.images.length;
  },
  prevImage() {
    this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
  },
  startAutoPlay() {
    this.timer = setInterval(() => {
      this.nextImage();
    }, 3000); // 每3秒切换一次
  },
  stopAutoPlay() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
},
mounted() {
  this.startAutoPlay();
},
beforeDestroy() {
  this.stopAutoPlay();
}
</script>

<template>
  <div class="carousel">
    <div class="carousel-images">
      <!-- 主图 -->
      <img
        :src="images[currentIndex].src"
        :alt="images[currentIndex].alt"
        class="main-image"
      >
    </div>
  </div>
</template>

<style scoped>
.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel-images {
  display: flex;
  justify-content: center;
  position: relative;
  width: 800px; /* 调整宽度以容纳主图 */
  height: 400px;
  overflow: hidden;
}

.main-image {
  position: absolute;
  width: 800px;
  height: 100%; /* 主图高度占满 */
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
</style>